import React, {Component} from 'react';
import './Catlist.less'
class Catlist extends Component {
    toCatlist(catlist){
        this.props.getCatlist(catlist)
    }
    render() {
        return (
            <div className={'catlist'}>
                <h3>
                    <button >全部风格</button>
                </h3>
                <ul>
                    <li>
                        <div className={'left'}>
                            语种
                        </div>
                        <div className={'right'}>
                            <ul>
                                {
                                    this.props.catlist.sub.map((item,index)=>{
                                        return(
                                        item.category===0?
                                            <li key={index} onClick={this.toCatlist.bind(this,item.name)}>{item.name}
                                                <span className={'line'}>|</span>
                                            </li>
                                            :''
                                        )
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div className={'left'}>
                            风格
                        </div>
                        <div className={'right'}>
                            <ul>
                                {
                                    this.props.catlist.sub.map((item,index)=>{
                                            return(
                                                item.category===1?
                                                <li key={index}>{item.name}
                                                    <span className={'line'}>|</span>
                                                </li>:''
                                            )
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div className={'left'}>
                            场景
                        </div>
                        <div className={'right'}>
                            <ul>
                                {
                                    this.props.catlist.sub.map((item,index)=>{
                                            return(
                                                item.category===2?
                                                <li key={index}>{item.name}
                                                    <span className={'line'}>|</span>
                                                </li>:''
                                            )
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div className={'left'}>
                            情感
                        </div>
                        <div className={'right'}>
                            <ul>
                                {
                                    this.props.catlist.sub.map((item,index)=>{
                                            return(
                                                item.category===3?
                                                <li key={index}>{item.name}
                                                    <span className={'line'}>|</span>
                                                </li>:''
                                            )
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div className={'left'}>
                            主题
                        </div>
                        <div className={'right'}>
                            <ul>
                                {
                                    this.props.catlist.sub.map((item,index)=>{
                                            return(
                                                item.category===4?
                                                <li key={index}>{item.name}
                                                    <span className={'line'}>|</span>
                                                </li>:''
                                            )
                                    })
                                }
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        );
    }
}

export default Catlist;